<template>
  <div class="spl-container">
    <breadcrumb :data="pathData"></breadcrumb>
    <div class="bill-container">
      <div class="search-row m-form">
        <label class="ml-10">状态:</label>
        <el-checkbox-group v-model="billStatus" class="label-sel">
          <el-checkbox v-for="(item,index) in statusOptions" :key="index" :label="item.title" :value="item.value"></el-checkbox>
        </el-checkbox-group>

        <label class="label-text">账单年月:</label>
        <el-date-picker
          v-model="billYearMonth"
          type="month" value-format="yyyy-MM" class="label-sel w-150">
        </el-date-picker>

        <label class="label-text">账单编号:</label>
        <el-input label="账单编号:" v-model="billCode" class="label-sel w-220"></el-input>

        <el-button type="primary" class="opt-btn ml-15" icon="icon el-icon-search" @click="getTableData">查询
        </el-button>
      </div>

      <dTable @fetch="getTableData" ref="billTable" :tableHeight="tableHeight" :show-selection="true">
      <el-table-column prop="billNumber" label="账单编号" min-width="150" header-align="center" align="left" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="itemType" label="账单类型" width="120" header-align="center" align="left" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="yearDate" label="账单年月" width="120" header-align="center" align="center" :formatter="formatYearMonth" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="totalAmount" label="账单金额" width="120" header-align="center" align="right" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="notPayAmount" label="未支付金额" min-width="160" header-align="center" align="right" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="expectedReleaseDate" label="预计发放日期" width="150" header-align="center" align="center" :formatter="formatDate" :show-overflow-tooltip="true"></el-table-column>
      <!--<el-table-column prop="nativePlace" label="已开票金额"></el-table-column>-->
      <el-table-column prop="totalNumber" label="账单人数" width="120" header-align="center" align="left" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="statusMeaning" label="账单状态" width="120" header-align="center" align="left" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="createName" label="创建人" width="130" header-align="center" align="left" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="150" header-align="center" align="center" :formatter="formatDateTime" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column fixed="right" label="操作" width="180" header-align="center" align="center">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="viewBill(scope.row)">查看</el-button>
          <el-button type="text" size="small" @click="delBill(scope.row)">删除</el-button>
         <!-- <el-button type="text" size="small" @click="printBill(scope.row)">
            打印
          </el-button>-->
          <el-button type="text" size="small" @click="exportBill(scope.row)">导出</el-button>
        </template>
      </el-table-column>
    </dTable>
    </div>
  </div>
</template>
<script>
  import dTable from '../../components/common/table'
  export default {
    components: {dTable},
    data () {
      return {
        // 导航
        pathData: [
          { name: '账单管理' },
          { name: '账单管理', path: '/billManage' }
        ],
        billStatus: [],
        billYearMonth: '',
        billCode: '',
        statusOptions: [
          {title: '待付款'},//60003001	待付款 60003003	付款-处理中 60003002	付款-待打款
          {title: '已划款'},//60003004	审核通过 60003005	发放中
          {title: '发放中'},//60003004	审核通过 60003005	发放中
          {title: '办结'}//60003006	发放成功
        ],
        statusMap: {
          '待付款': ['60003001', '60003002', '60003003'],
          '已划款': ['60003004', '60003005'],
          '发放中': ['60003004', '60003005'],
          '办结': ['60003006']
        }
      }
    },
    created () {
      this.$nextTick(() => {
        this.getTableData()
      })
    },
    computed: {
      tableHeight: function () {
        return this.$global.bodyHeight - 210 + 'px'
      }
    },
    methods: {
      formatDateTime(row, column, cellValue, index){
        return cellValue == null ? '-' : this.$global.dateToStrByFormart(cellValue, 'yyyy-MM-dd HH:mm')
      },
      formatDate(row, column, cellValue, index){
        return cellValue == null ? '-' : this.$global.dateToStrByFormart(cellValue, 'yyyy-MM-dd')
      },
      formatYearMonth(row, column, cellValue, index){
        return cellValue == null ? '-' : this.$global.dateToStrByFormart(cellValue, 'yyyy-MM')
      },
      getTableData (params = []) {
        params = [{property: "status", value: this.getStatusFinal()}, {
          property: "yearDate",
          value: this.billYearMonth
        }, {property: "billNumber", value: this.billCode}]
        this.$refs.billTable.fetch(params, 'post', '/salary/insteadBill/pageBill')
      },
      getStatusFinal(){
        var billStatus = this.billStatus;
        var status = [];
        billStatus.forEach(item => {
            this.statusMap[item].forEach(it =>{
                if(status.indexOf(it)==-1){
                  status.push(it)
                }
            })
        })
        return status
      },
      //查看
      viewBill(row){

        this.$router.push("/substituteSalary?billNumber="+row.billNumber+'&status='+row.status+'&billId='+row.id)
      },
      //删除
      delBill(row){
        this.$confirm('确认删除？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: '/salary/insteadBill/deleteBill',
            method: 'post',
            data: row
          }).then(( {data} ) => {
            this.$message({
              type: 'success',
              message: '删除成功',
            });
            this.$refs.billTable.reload()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      //打印
      printBill(row){
          console.log(row)
      },
      //导出
      exportBill(row){

        this.$downloadFile('/salary/insteadBill/pageExport','post',this.$qs.stringify({billIds:[row.id]}), this.$global.EXCEL,'账单导出')
      }
    }
  }
</script>
<style lang="less" scoped>
  .bill-container {
    padding: 20px;
    position: relative;
  }

  .search-row {
    .label-text {
      width: 100px;
    }
  }
</style>
